<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getByDictType } from '@/api/common'

const emit = defineEmits(['handleSearch'])

const formData = ref({
  employeeId: '',
  birthday: '',
  insureName: '',
  companyShortName: '',
  idNumber: '',
  idType: null,
  phoneOrMail: ''
})
function search() {
  emit('handleSearch', formData)
}
function reset() {
  formData.value = {
    employeeId: '',
    birthday: '',
    insureName: '',
    companyShortName: '',
    idNumber: '',
    idType: null,
    phoneOrMail: '',
    mail: ''
  }
}
const options = ref([])
async function getIdCardList() {
  let res = await getByDictType({ dictType: 'idtype' })
  console.log('res', res)
  if (res.isSuccess) {
    const list = []
    res.data &&
      res.data.length &&
      res.data.map((v) => {
        list.push({
          label: v.dictCName,
          value: v.dictCode
        })
      })
    options.value = list
  }
}
onMounted(() => {
  getIdCardList()
})
</script>
<template>
  <div class="search-form" justify="space-between">
    <a-row :gutter="[16, 20]">
      <a-col class="gutter-row" :span="6">
        <a-input
          v-model:value="formData.employeeId"
          :placeholder="$t('home.search.MemberID')"
          allow-clear
        />
      </a-col>
      <a-col class="gutter-row" :span="6">
        <a-input
          v-model:value="formData.insureName"
          :placeholder="$t('home.search.MemberName')"
          allow-clear
        />
      </a-col>
      <a-col class="gutter-row" :span="6">
        <a-input
          v-model:value="formData.birthday"
          :placeholder="$t('home.search.Birthday')"
          allow-clear
        />
      </a-col>
      <a-col class="gutter-row" :span="6">
        <a-input
          v-model:value="formData.companyShortName"
          :placeholder="$t('home.search.CompanyName')"
          allow-clear
        />
      </a-col>
      <a-col class="gutter-row" :span="6">
        <a-select
          ref="select"
          :showArrow="true"
          v-model:value="formData.idType"
          style="width: 100%"
          :placeholder="$t('home.search.IDType')"
          :options="options"
        ></a-select>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <a-input
          v-model:value="formData.idNumber"
          :placeholder="$t('home.search.IDNumber')"
          allow-clear
        />
      </a-col>
      <a-col class="gutter-row" :span="6">
        <a-input
          v-model:value="formData.phoneOrMail"
          :placeholder="$t('home.search.MobileEmail')"
          allow-clear
        />
      </a-col>
      <a-col class="gutter-search" :span="6">
        <a-button type="primary" class="search-btn" @click="search">{{
          $t('global.search')
        }}</a-button>
        <a-button @click="reset">{{ $t('global.reset') }}</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<style scoped>
.search-form {
  margin-bottom: 30px;
}
.search-btn {
  margin-right: 16px;
}
.gutter-search {
  text-align: right;
}
</style>
